<template>
  <div class="attraction-detail" v-loading="loading">
    <!-- 图片轮播 -->
    <section class="gallery-section">
      <swiper
        :modules="modules"
        :slides-per-view="1"
        :space-between="0"
        :loop="true"
        :autoplay="{ delay: 3000 }"
        :pagination="{ clickable: true }"
        class="gallery-swiper"
      >
        <swiper-slide v-for="(img, index) in attraction.images" :key="index">
          <div class="slide-image">
            <img :src="img" :alt="`${attraction.name} ${index + 1}`" />
          </div>
        </swiper-slide>
      </swiper>

      <!-- 标题信息 -->
      <div class="gallery-title">
        <h1 class="main-title">{{ attraction.name }}</h1>
        <p class="sub-title">{{ attraction.slogan || attraction.description }}</p>
      </div>
    </section>

    <div class="container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb-nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/attractions' }">景点门票</el-breadcrumb-item>
          <el-breadcrumb-item>{{ attraction.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="detail-layout">
        <!-- 左侧相关攻略 -->
        <aside class="guides-sidebar">
          <div class="sidebar-card">
            <h3 class="sidebar-title">相关攻略</h3>
            <div class="guides-list">
              <div
                v-for="guide in relatedGuides"
                :key="guide.id"
                class="guide-item"
                @click="goToGuide(guide.id)"
              >
                <img :src="guide.cover" :alt="guide.title" class="guide-cover" />
                <div class="guide-info">
                  <h4 class="guide-title">{{ guide.title }}</h4>
                  <div class="guide-meta">
                    <div class="author">
                      <img :src="guide.author.avatar" :alt="guide.author.name" />
                      <span>{{ guide.author.name }}</span>
                    </div>
                    <div class="stats">
                      <span><el-icon><View /></el-icon> {{ guide.views }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </aside>

        <!-- 中间主内容 -->
        <div class="detail-main">
          <!-- 视频介绍 -->
          <div class="video-card" v-if="attraction.videoUrl">
            <h2 class="card-title">视频介绍</h2>
            <div class="video-container">
              <video
                :src="attraction.videoUrl"
                controls
                controlslist="nodownload"
                class="video-player"
                poster=""
              >
                您的浏览器不支持视频播放
              </video>
            </div>
          </div>

          <!-- 基本信息 -->
          <div class="info-card">
            <!-- <div class="breadcrumb">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/attractions' }">景点门票</el-breadcrumb-item>
                <el-breadcrumb-item>{{ attraction.name }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div> -->

            <h1 class="attraction-name">{{ attraction.name }}</h1>

            <div class="attraction-meta">
              <div class="meta-item">
                <el-icon><Location /></el-icon>
                <span>{{ attraction.city }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Star /></el-icon>
                <span>{{ attraction.rating }} 分</span>
              </div>
              <div class="meta-item">
                <el-icon><View /></el-icon>
                <span>{{ attraction.views }} 人浏览</span>
              </div>
            </div>

            <div class="tags">
              <el-tag v-for="tag in attraction.tags" :key="tag" type="info">{{ tag }}</el-tag>
            </div>

            <p class="description">{{ attraction.description }}</p>
          </div>

          <!-- 详细介绍 -->
          <div class="content-card">
            <h2 class="card-title">景点介绍</h2>
            <div class="content-text" v-html="attraction.content"></div>
          </div>

          <!-- 开放时间 -->
          <div class="content-card">
            <h2 class="card-title">开放时间</h2>
            <p class="content-text">{{ attraction.openTime }}</p>
          </div>

          <!-- 交通指南 -->
          <div class="content-card">
            <h2 class="card-title">交通指南</h2>
            <p class="content-text">{{ attraction.traffic }}</p>
          </div>

          <!-- 游客评价 -->
<!--          <div class="content-card">
            <h2 class="card-title">游客评价</h2>
            <div class="reviews-list">
              <div v-for="review in attraction.reviews" :key="review.id" class="review-item">
                <div class="review-header">
                  <img :src="review.avatar" :alt="review.name" class="review-avatar" />
                  <div class="review-info">
                    <div class="review-name">{{ review.name }}</div>
                    <div class="review-rating">
                      <el-rate v-model="review.rating" disabled />
                    </div>
                  </div>
                  <div class="review-date">{{ review.date }}</div>
                </div>
                <p class="review-content">{{ review.content }}</p>
              </div>
            </div>
          </div>-->

          <!-- 评论区 -->
          <div class="content-card">
            <CommentSection
              :comments="comments"
              :total-comments="totalComments"
              title="游客评论"
              placeholder="分享你的游玩体验..."
              @submit="handleComment"
              @reply="handleReply"
              @like="handleLikeComment"
            />
          </div>
        </div>

        <!-- 右侧预订卡片 -->
        <aside class="booking-sidebar">
          <div class="booking-card">
            <div class="price-section">
              <div class="price-label">门票价格</div>
              <div class="price-box">
                <span v-if="attraction.originalPrice" class="original-price">¥{{ attraction.originalPrice }}</span>
                <span class="current-price">¥{{ attraction.price }}</span>
              </div>
              <div v-if="attraction.discount" class="discount-badge">{{ attraction.discount }}折优惠</div>
            </div>

            <el-divider />

            <div class="ticket-options">
              <div class="option-label">选择票型</div>
              <el-radio-group v-model="selectedTicket" class="ticket-group">
                <el-radio
                  v-for="ticket in ticketTypes"
                  :key="ticket.id"
                  :label="ticket.id"
                  class="ticket-radio"
                >
                  <div class="ticket-info">
                    <span class="ticket-name">{{ ticket.name }}</span>
                    <span class="ticket-price">¥{{ ticket.price }}</span>
                  </div>
                </el-radio>
              </el-radio-group>
            </div>

            <div class="date-picker">
              <div class="option-label">选择日期</div>
              <el-date-picker
                v-model="selectedDate"
                type="date"
                placeholder="选择游玩日期"
                :disabled-date="disabledDate"
                style="width: 100%"
              />
            </div>

            <div class="quantity-picker">
              <div class="option-label">购买数量</div>
              <el-input-number v-model="quantity" :min="1" :max="10" />
            </div>

            <el-divider />

            <div class="total-price">
              <span>总计</span>
              <span class="total-amount">¥{{ totalPrice }}</span>
            </div>

            <el-button type="primary" size="large" class="book-button" @click="handleBooking">
              立即预订
            </el-button>

            <div class="tips">
              <el-icon><InfoFilled /></el-icon>
              <span>预订后2小时内可免费取消</span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination } from 'swiper/modules'
import { Location, Star, View, InfoFilled, ChatDotRound } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import CommentSection from '@/components/common/CommentSection.vue'
// import { getAttractionDetail, bookTicket, getRelatedGuides } from '@/api/attractions'
import 'swiper/css'
import 'swiper/css/pagination'

const route = useRoute()
const router = useRouter()
const modules = [Autoplay, Pagination]

const loading = ref(false)
const selectedTicket = ref('adult')
const selectedDate = ref('')
const quantity = ref(1)

// 模拟景点数据
const attraction = ref({
  id: 1,
  name: '故宫博物院',
  slogan: '世界文化遗产，中国明清两代的皇家宫殿',
  city: '北京',
  rating: 4.8,
  views: '125k',
  hot: true,
  price: 60,
  originalPrice: null,
  discount: null,
  tags: ['世界遗产', '历史建筑', '必游景点'],
  description: '世界文化遗产，中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。',
  videoUrl: 'https://lf-cdn.trae.com.cn/obj/trae-com-cn/trae_website_prod_cn/static/media/solo-introduce.dadc41f3.mp4',
  content: '<p>故宫博物院建立于1925年，是在明清两朝皇宫紫禁城的基础上建立起来的综合性博物馆。</p><p>故宫占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。</p>',
  openTime: '旺季（4月1日-10月31日）：08:30-17:00<br/>淡季（11月1日-3月31日）：08:30-16:30<br/>周一闭馆（法定节假日除外）',
  traffic: '地铁：乘坐地铁1号线在天安门东站或天安门西站下车<br/>公交：乘坐1路、2路、52路、59路、82路、99路、120路、126路、观光1线、观光2线在天安门东站或天安门西站下车',
  images: [
    'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?w=1200&q=80',
    'https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=1200&q=80',
    'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=1200&q=80'
  ],
  reviews: [
    {
      id: 1,
      name: '旅行者小王',
      avatar: 'https://i.pravatar.cc/150?img=11',
      rating: 5,
      date: '2024-01-15',
      content: '非常值得一去的景点，建筑宏伟壮观，历史文化底蕴深厚。建议提前网上预约，避开高峰期。'
    },
    {
      id: 2,
      name: '摄影爱好者',
      avatar: 'https://i.pravatar.cc/150?img=12',
      rating: 5,
      date: '2024-01-10',
      content: '拍照圣地！每个角落都是风景，建议早上去，光线最好。记得带好相机和充电宝。'
    }
  ]
})

// 评论数据
const totalComments = ref(156)
const comments = ref([
  {
    id: 1,
    user: {
      name: '旅行达人小李',
      avatar: 'https://i.pravatar.cc/150?img=41'
    },
    content: '故宫真的太壮观了！建议早上8点就去，人少可以慢慢逛。珍宝馆和钟表馆一定要去看，非常震撼！',
    time: '3小时前',
    likes: 28,
    isLiked: false
  },
  {
    id: 2,
    user: {
      name: '摄影爱好者',
      avatar: 'https://i.pravatar.cc/150?img=42'
    },
    content: '拍照超级出片！推荐下午4-5点去，光线最好。记得带充电宝，一天下来手机电量不够用。',
    time: '1天前',
    likes: 45,
    isLiked: false
  },
  {
    id: 3,
    user: {
      name: '历史爱好者',
      avatar: 'https://i.pravatar.cc/150?img=43'
    },
    content: '建议提前做功课或者租个讲解器，不然就是走马观花。每个宫殿背后都有很多故事，值得细细品味。',
    time: '2天前',
    likes: 67,
    isLiked: false
  }
])

// 相关攻略数据
const relatedGuides = ref([
  {
    id: 1,
    title: '故宫一日游完整攻略 | 避坑指南',
    summary: '详细的游览路线、最佳拍照点位、美食推荐，带你深度游览故宫，避开人潮...',
    cover: 'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?w=400&q=80',
    author: {
      name: '北京通',
      avatar: 'https://i.pravatar.cc/150?img=21'
    },
    views: '15.2k',
    comments: 234
  },
  {
    id: 2,
    title: '故宫摄影攻略 | 10个最佳机位推荐',
    summary: '资深摄影师分享故宫最美拍摄点，不同季节的最佳拍摄时间，让你拍出大片...',
    cover: 'https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=400&q=80',
    author: {
      name: '摄影师老王',
      avatar: 'https://i.pravatar.cc/150?img=22'
    },
    views: '12.8k',
    comments: 189
  },
  {
    id: 3,
    title: '故宫周边美食推荐 | 老北京味道',
    summary: '故宫附近的地道美食，从小吃到正餐，带你品尝最正宗的老北京味道...',
    cover: 'https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?w=400&q=80',
    author: {
      name: '美食探店',
      avatar: 'https://i.pravatar.cc/150?img=23'
    },
    views: '9.6k',
    comments: 156
  }
])

// 票型选项
const ticketTypes = ref([
  { id: 'adult', name: '成人票', price: 60 },
  { id: 'student', name: '学生票', price: 30 },
  { id: 'child', name: '儿童票', price: 0 },
  { id: 'senior', name: '老人票', price: 30 }
])

// 计算总价
const totalPrice = computed(() => {
  const ticket = ticketTypes.value.find(t => t.id === selectedTicket.value)
  return ticket ? ticket.price * quantity.value : 0
})

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7
}

// 加载景点详情
const loadDetail = async () => {
  loading.value = true
  try {
    // TODO: 实际项目中调用 API
    // const [detailRes, guidesRes] = await Promise.all([
    //   getAttractionDetail(route.params.id),
    //   getRelatedGuides(route.params.id)
    // ])
    // attraction.value = detailRes.data
    // relatedGuides.value = guidesRes.data

    // 模拟加载延迟
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('加载详情失败:', error)
    ElMessage.error('加载详情失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 跳转到攻略详情
const goToGuide = (id) => {
  router.push(`/guides/${id}`)
}

// 发表评论
const handleComment = async (content) => {
  try {
    // TODO: 调用API
    // await addAttractionComment({
    //   attractionId: attraction.value.id,
    //   content: content
    // })

    // 模拟添加评论到列表
    comments.value.unshift({
      id: Date.now(),
      user: {
        name: '当前用户',
        avatar: 'https://i.pravatar.cc/150?img=50'
      },
      content: content,
      time: '刚刚',
      likes: 0,
      isLiked: false
    })
    totalComments.value++
  } catch (error) {
    throw error
  }
}

// 回复评论
const handleReply = (comment) => {
  console.log('回复评论:', comment)
}

// 点赞评论
const handleLikeComment = (comment) => {
  comment.isLiked = !comment.isLiked
  comment.likes += comment.isLiked ? 1 : -1
  ElMessage.success(comment.isLiked ? '点赞成功' : '取消点赞')
}

// 预订门票
const handleBooking = () => {
  // 构建订单页面URL参数
  const params = new URLSearchParams({
    id: attraction.value.id || '',
    name: encodeURIComponent(attraction.value.name || ''),
    location: encodeURIComponent(attraction.value.location || ''),
    price: attraction.value.price || 0,
    image: encodeURIComponent(attraction.value.images?.[0] || '')
  })

  // 在新标签页打开订单页面
  const orderUrl = `/order/create?${params.toString()}`
  window.open(orderUrl, '_blank')
}

onMounted(() => {
  loadDetail()

  // 如果从列表页点击预订按钮进来，自动滚动到预订区域
  // if (route.query.action === 'book') {
  //   setTimeout(() => {
  //     document.querySelector('.booking-card')?.scrollIntoView({ behavior: 'smooth' })
  //   }, 500)
  // }
})
</script>

<style scoped lang="less">
.breadcrumb-nav {
  margin-bottom: 30px;
}


.attraction-detail {
  min-height: 100vh;
  background: #f8f9fa;
}

// 图片轮播
.gallery-section {
  height: 500px;
  background: #000;
  position: relative;

  .gallery-swiper {
    height: 100%;

    .slide-image {
      width: 100%;
      height: 100%;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.3) 0%,
          rgba(118, 75, 162, 0.2) 100%
        );
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.85) contrast(1.1);
      }
    }

    :deep(.swiper-pagination) {
      bottom: 20px;
      z-index: 3;

      .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #fff;
        opacity: 0.5;

        &.swiper-pagination-bullet-active {
          opacity: 1;
          width: 30px;
          border-radius: 5px;
        }
      }
    }
  }

  // 标题信息
  .gallery-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 40px 40px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 2;
    color: #fff;
  }

  .main-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 12px 0;
    text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    animation: fadeInUp 0.8s ease-out;
  }

  .sub-title {
    font-size: 20px;
    margin: 0;
    opacity: 0.95;
    text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5);
    font-weight: 400;
    animation: fadeInUp 1s ease-out;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 容器
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

// 布局
.detail-layout {
  display: grid;
  grid-template-columns: 260px 1fr 340px;
  gap: 32px;
}

// 主内容区
.detail-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-card,
.content-card,
.video-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

// 视频卡片
.video-card {
  .video-container {
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    position: relative;
    padding-top: 56.25%; // 16:9 比例

    .video-player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.breadcrumb {
  margin-bottom: 24px;
}

.attraction-name {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.attraction-meta {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;

  .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 15px;
  }
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.description {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  margin: 0;
}

.card-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 20px 0;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.content-text {
  font-size: 15px;
  color: #666;
  line-height: 1.8;

  :deep(p) {
    margin: 0 0 16px 0;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 左侧攻略侧边栏
.guides-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

.sidebar-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;
}

.guides-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.guide-item {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .guide-cover {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
  }

  .guide-info {
    padding: 12px;
    background: #f8f9fa;
  }

  .guide-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .guide-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .author {
      display: flex;
      align-items: center;
      gap: 6px;

      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
      }

      span {
        font-size: 12px;
        color: #666;
      }
    }

    .stats {
      font-size: 12px;
      color: #999;

      span {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }
}

// 评价列表
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-item {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.review-info {
  flex: 1;
}

.review-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.review-rating {
  :deep(.el-rate) {
    height: 16px;
  }
}

.review-date {
  font-size: 13px;
  color: #999;
}

.review-content {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

// 预订侧边栏
.booking-sidebar {
  position: sticky;
  top: 90px;
  height: fit-content;
}

.booking-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.price-section {
  text-align: center;
  margin-bottom: 24px;
}

.price-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.price-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.original-price {
  font-size: 18px;
  color: #999;
  text-decoration: line-through;
}

.current-price {
  font-size: 36px;
  font-weight: 700;
  color: #ff6b6b;
}

.discount-badge {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.ticket-options,
.date-picker,
.quantity-picker {
  margin-bottom: 24px;
}

.option-label {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.ticket-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  .ticket-radio {
    width: 100%;
    margin: 0;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      border-color: #ff6b6b;
    }

    :deep(.el-radio__input.is-checked + .el-radio__label) {
      color: #ff6b6b;
    }

    :deep(.el-radio__input.is-checked) {
      .el-radio__inner {
        background-color: #ff6b6b;
        border-color: #ff6b6b;
      }
    }
  }
}

.ticket-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.ticket-name {
  font-size: 14px;
  color: #333;
}

.ticket-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff6b6b;
}

.quantity-picker {
  :deep(.el-input-number) {
    width: 100%;
  }
}

.total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333;
  margin-bottom: 24px;

  .total-amount {
    font-size: 28px;
    font-weight: 700;
    color: #ff6b6b;
  }
}

.book-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 24px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  border: none;
}

.tips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  color: #999;
}

// 响应式
@media (max-width: 1400px) {
  .detail-layout {
    grid-template-columns: 240px 1fr 320px;
    gap: 24px;
  }
}

@media (max-width: 1200px) {
  .detail-layout {
    grid-template-columns: 1fr 340px;
  }

  .guides-sidebar {
    display: none;
  }
}

@media (max-width: 992px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .guides-sidebar {
    display: none;
  }

  .booking-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .gallery-section {
    height: 300px;

    .gallery-title {
      padding: 40px 20px 24px;
    }

    .main-title {
      font-size: 28px;
    }

    .sub-title {
      font-size: 14px;
    }
  }

  .attraction-name {
    font-size: 24px;
  }

  .attraction-meta {
    flex-wrap: wrap;
    gap: 16px;
  }

  .info-card,
  .content-card,
  .video-card {
    padding: 20px;
  }

  .booking-card {
    padding: 24px;
  }

}
</style>
